<script setup>
/**
 * 添加联系人列表 渲染box 搜索触发成功后显示
 * 添加联系人功能
 * 搜索 !!
 */
import { addContactsAPI } from '@/api/contactsAPI.js'
import { showMessage } from '@/utils/elementUtil.js'
import { ref } from 'vue'

const buttonText = ref('添加')
const props = defineProps({
    headImgUrl: {
        type: String,
        default: '',
    },
    username: {
        type: String,
        default: '加载中...',
    },
    id: {
        type: Number,
        default: '',
    },
    isContact: {
        type: Number,
        default: false,
    },
})

const addUser = async (id) => {
    const res = await addContactsAPI(id)
    if (res.data.code === 1) {
        console.log('添加成功')
        showMessage('添加成功', 'success')
        buttonText.value = '已发送'
    } else {
        console.log(res.data)
        showMessage('添加失败', 'error')
    }
}
</script>

<template>
    <div class="box">
        <img :src="headImgUrl" alt="" />
        <div style="font-size: 20px; line-height: 80px">{{ username }}</div>
        <button class="btn" @click="addUser(id)" v-if="props.isContact === 0">
            {{ buttonText }}
        </button>
        <button class="btn" v-else style="background-color: rgb(248, 152.1, 152.1)">已发送</button>
    </div>
</template>

<style scoped>
.box {
    position: relative;
    height: 80px;
    width: 100%;
    border-top: 1px solid var(--el-border-color);
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
}

img {
    width: 62px;
    height: 62px;
    margin: 9px;
    border-radius: 12px;
}

.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    background-color: var(--myblue);
    border: none;
    color: white;
    cursor: pointer;
}
</style>
